<!--home页-->
<template>
  <div class="home" >
  	<!--头部-->
  	<header-component></header-component>
  	<!--轮播图-->
  	<banner :list="b_list"></banner>
  	<!--主要内容-->
  	<div class="main">
  		<!--list-->
  		<div class="list">
  			<ul>
  				<li v-for="item in pro_list" :key="item.id">
  					<router-link to="Pro_details">
  						<img :src="item.img_src"/>
  						<p v-text="item.test"></p>
  					</router-link>
  				</li>
  			</ul>
  			<router-link to="Pro_details" class="link-component">
  				<img src="~imgs/home_8.gif"/>
  			</router-link>
  		</div>
  		<!--introduce-->
  		<div class="introduce">
  			<titles>
  				<p>
						<img src="~imgs/home_9.gif"/>
						<span>精品推荐</span>
					</p>
					<p>您的选择，我都懂得</p>
  			</titles>
  			<div class="promote">
  				<div class="five">
  					<router-link to="Pro_details">
  						<img src="~imgs/home_zzz.gif"/>
  					</router-link>
  					<div class="text-info">
  						<p>第五代升级</p>
  						<p>稳固防滑防颠簸</p>
  						<p>
  							单手取放
  							<img src="~imgs/hot.gif" class="hot"/>
  						</p>
  						<p>
  							RMB <i>69.00</i>
  						</p>
  						<p>
  							<router-link to="Pro_details">
  								立即抢购
  							</router-link>
  						</p>
  					</div>
  				</div>
  				<div class="six">
  					<router-link to="Pro_details">
  						<img src="~imgs/home_sss.gif"/>
  					</router-link>
  					<div class="text-info-six">
  						<p>第六代升级</p>
  						<p>先科车载免提电</p>
  						<p>
  							话汽车音乐
  							<img src="~imgs/hot.gif" class="hot"/>
  						</p>
  						<p>
  							RMB <i>138.00</i>
  						</p>
  						<p>
  							<router-link to="Pro_details">
  								立即抢购
  							</router-link>
  						</p>
  					</div>
  				</div>
  				<router-link to="Pro_details" class="links">
  					查看更多 >
  				</router-link>
  			</div>
  			
  		</div>
  		<!--day-->
  		<div class="day">
  			<titles>
  				<p>
						<img src="~imgs/home_11.gif"/>
						<span>天天特价</span>
					</p>
					<p>特价商品，一网打尽</p>
  			</titles>
  			<div class="day-pro">
  				<p>
	  				<router-link to="Pro_details">
	  					<img src="~imgs/home_12.gif"/>
	  				</router-link>
	  				<router-link to="Pro_details">
	  					<img src="~imgs/home_13.gif"/>
	  				</router-link>
	  			</p>
	  			<ul>
	  				<li>
	  					<router-link to="Pro_details">
	  						<img src="~imgs/home_14.gif"/>
	  						<span>车载逆变器 装换器</span>
	  					</router-link>
	  					<p>
	  						<router-link to="Pro_details">促销价<i>¥199.00</i></router-link>
	  						<img src="~imgs/home_17.gif" class="shopcar"/>
	  					</p>
	  				</li>
	  				<li>
	  					<router-link to="Pro_details">
	  						<img src="~imgs/home_15.gif"/>
	  						<span>车载逆变器 装换器</span>
	  					</router-link>
	  					<p>
	  						<router-link to="Pro_details">促销价<i>¥199.00</i></router-link>
	  						<img src="~imgs/home_17.gif" class="shopcar"/>
	  					</p>
	  				</li>
	  				<li>
	  					<router-link to="Pro_details">
	  						<img src="~imgs/home_16.gif"/>
	  						<span>车载逆变器 装换器</span>
	  					</router-link>
	  					<p>
	  						<router-link to="Pro_details">促销价<i>¥199.00</i></router-link>
	  						<img src="~imgs/home_17.gif" class="shopcar"/>
	  					</p>
	  				</li>
	  			</ul>
	  			<router-link to="Pro_details" class="links">
  					查看更多 >
  				</router-link>
  			</div>
  		</div>
  		<div class="time-shop">
  			<titles>
  				<p>
						<img src="~imgs/home_18.gif"/>
						<span>限时好礼</span>
					</p>
					<p>您的时间，为您节省</p>
  			</titles>
  			<ul>
  				<li v-for="item in pro_list_2" :key="item.id">
  					<router-link to="Pro_details">
  						<img :src="item.img_src"/>
  					</router-link>
  					<p v-text="item.test"></p>
  					<p>
  						<span v-text="item.price"></span>
  						<del v-text="item.before_price"></del>
  						<router-link to="Pro_details">
  							<i>抢</i>
  						</router-link>
  					</p>
  				</li>
  			</ul>
  		</div>
  	</div>
  	<tabbar></tabbar>
  </div>
</template>

<script>
//	导入组件
	import Header from "./components/Header"
	import Title from "./components/Title"
	import Banner from "./components/Banner"
	import Main from '@/pages/main/Main'
	import axios from 'axios'
	export default {
//		挂载
	  components:{
	  	"header-component":Header,
	  	"titles":Title,
	  	"banner":Banner,
	  	"tabbar":Main
	  },
	  data(){
	  	return {
	  		b_list:[],
	  		pro_list:[],
	  		pro_list_2:[]
	  	}
	  },
	  methods:{

	  },
	  mounted(){
	  	var that = this;
	  	axios.get("/api/index.json").
	  	then(function(res){
				that.b_list = res.data.data.b_list;
				that.pro_list = res.data.data.pro_list;
				that.pro_list_2 = res.data.data.pro_list_2;
	  	})
	  }
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
	/*主要内容*/
	.main
		width: 100%;
		overflow: hidden;
		padding-bottom: 1.2rem;
		margin-top: 0.38rem;
		position: absolute;
		/*list*/
		.list
			width: 100%;
			overflow: hidden;
			ul
				display: flex;
				column-count: 3;
				li
					display: flex;
					float: left;
					flex: 1;
					justify-content: center;
					background: url("~imgs/home_b.gif")no-repeat;
					background-size: 1.38rem 1.58rem;
					background-position: 50% 0.08rem;
					padding: 0.08rem 0 0.08rem 0;
					a
						display: block;
						img
							padding-top: 0.34rem;
							width: 1.2rem;
							height: 0.9rem;
						p
							font-size: 0.24rem;
							color: #515151;
							text-align: center;
							padding-top: 0.8rem;
			.link-component
				width: 7.04rem;
				display: inline-block;
				display: flex;
				justify-content: center;
				margin: 0.4rem auto;
				
				img
					width: 7.04rem;
					height: 2rem;
		/*introduce*/
		.introduce
			width: 100%;
			overflow: hidden;
			.promote
				width: 7.02rem;
				height: 9.4rem;
				margin: 0.2rem auto; 
				background: url("~imgs/home_10.gif")no-repeat;
				background-size: 7.02rem 8.58rem;
				position: relative;
				.five
					position: relative;
					img
						width: 2.74rem;
						height: 3.44rem;
						position: absolute;
						top: 0.84rem;
						left: 0.78rem;
					.text-info
						position: absolute;
						top: 1.1rem;
						right: 1.1rem;
						p:first-child
							width: 1.62rem;
							height: 0.56rem;
							background: #004986;
							color: #fff;
							font-size: 0.28rem;
							text-align: center;
							line-height: 0.56rem;
						p:nth-of-type(2),
						p:nth-of-type(3)
							margin-bottom: 0.04rem;
							font-size: 0.28rem;
							color: #fff;
						p:nth-of-type(4)
							font-size: 0.28rem;
							color: #fff;
							i
								color: #d30c0c;
						p:nth-of-type(5)
							width: 1.60rem;
							height: 0.54rem;
							border: 0.01rem solid #004986;
							font-size: 0.3rem;
							text-align: center;
							line-height: 0.54rem;
							a
								color: #fff;
						.hot
							width: 0.23rem;
							height: 0.31rem;
							position: absolute;
							top: 1.2rem;
							left: 1.28rem;
				.six
					position: relative;
					top: 4.26rem;
					img
						width: 2.74rem;
						height: 3.44rem;
						position: absolute;
						top: 0;
						right: 0.78rem;
					.hot
						width: 0.23rem;
						height: 0.31rem;
						position: absolute;
						top: 1.2rem;
						left: 1.5rem;
					.text-info-six
						position: absolute;
						top: 0.24rem;
						left: 1.36rem;
						p:first-child
							width: 1.62rem;
							height: 0.56rem;
							background: #004986;
							color: #fff;
							font-size: 0.28rem;
							text-align: center;
							line-height: 0.56rem;
						p:nth-of-type(2),
						p:nth-of-type(3)
							margin-bottom: 0.02rem;
							font-size: 0.28rem;
							color: #fff;
						p:nth-of-type(4)
							font-size: 0.28rem;
							color: #fff;
							i
								color: #d30c0c;
						p:nth-of-type(5)
							width: 1.60rem;
							height: 0.54rem;
							border: 0.01rem solid #004986;
							font-size: 0.3rem;
							text-align: center;
							line-height: 0.54rem;
							a
								color: #fff;
				.links
					position: absolute;
					bottom: 0;
					right: 0;
					font-size: 0.2rem;
					color: #949494;
		/*day*/
		.day
			margin-top: 0.4rem;
			width: 100%;
			overflow: hidden;
			.day-pro
				width: 7rem;
				margin: 0.22rem auto;
			p
				display: flex;
				justify-content: center;
				img
					width: 3.36rem;
			ul
				overflow: hidden;
				width: 7rem;
				display: flex;
				justify-content: space-between;
				margin: 0 auto;
				li
					width: 2.12rem;
					float: left;
					a
						font-size: 0.22rem;
						color: #515151;
						display: block;	
					img
						width: 2.12rem;
					.shopcar
						width: 0.32rem;
						height: 0.32rem;
					p
						a
							font-size: 0.2rem !important;
							i
								font-size: 0.24rem !important;
								margin-left: 0.1rem;
			.links
				float: right;
				font-size: 0.2rem;
				color: #949494;
		.time-shop
			width: 100%;
			margin-top: 0.38rem;
			ul
				width: 7rem;
				margin: 0.2rem auto;
				column-count: 3.34rem;
				li:nth-of-type(3)
					margin-top: -1.28rem !important;
				li:nth-of-type(4)
					margin-top: 0.18rem;
				li
					width: 3.34rem;
					float: left;
					margin-right: 0.32rem;
					margin-bottom: 0.2rem;
					img
						width: 3.34rem;
					p
						width: 100%;
						font-size: 0.24rem;
						color: #515151;
						margin-bottom: 0;
						margin-top: 0.12rem;
						span
							font-size: 0.24rem;
							float: left;
						del
							font-size: 0.2rem !important;
							margin-left: 0.1rem;
							text-decoration: line-through;
							float: left;
						i
							display: inline-block;
							width: 0.52rem;
							height: 0.36rem;
							background: #d30c0c;
							color: #fff;
							text-align: center;
							line-height: 0.36rem;
							float: right;
							font-size: 0.24rem;
				li:nth-of-type(2n)
					margin-right: 0;
				li:nth-of-type(3)
					margin-top: 0;
</style>
